https://discord.umbraco.com logo
Join Discord
Powered by
Quick Tip: How to customise your Umbraco...
# news
w
Have you seen the new upcoming Umbraco V13 Login Screen? Perhaps your not overly keen on the stock photo used, don't worry you can still customise how the login screen looks so it fits your clients brand better. https://blog.hackmakedo.com/2023/11/20/quick-tip-how-to-customise-your-umbraco-13-login-screen/
c
I still see this in v13 RC2
w
Yeh its not in the RC2, probably an RC3 or final perhaps. Noticed it when I have been working on a PR for core
j
It got merged last Friday and will end up in RC3
and yes, there will be at least another RC before final, so you'll have plenty of time to play with it
w
@Jacob Overgaard anyway for us to hide the two pink semi circles ?
s
I'm going to miss the background graphic changing between major versions. I really liked that.
w
@skttl same
j
Let's see what we can do with this new area in the coming versions 🙂 I'm sure we have a lot of creative people at hand
Also there's a new background color, but that could actually easily be replaced with an illustruous background with more subtle colors
@Warren Buckley there's no setting to do so, but maybe we could add a css variable to trigger it?
I also realise we don't actually load any stylesheets on the login page itself (the new one at /umbraco/login) but maybe that was a mistake?
w
I haven't tried to add a custom CSS file with a manifest JSON file yet - but I don't think I can target the DOM element inside the WebComponent can I @Jacob Overgaard ?
j
Not with CSS directly, but that's where CSS variables come into play
if you want to alter the DOM, you need to do that with javascript
w
Didn't think we could target the shadow DOM inside web components with JS ?
j
that's not a problem
querySelector('whatever-element').shadowRoot.querySelector('now-im-inside-the-shadowdom')
w
OK will hack at lunchtime and check we can still add/load JS or CSS files into the login page from a manifest
j
You can't, though
we aren't loading the bundles on the login page
maybe that's a mistake, as I was trying to say before 🤔
w
Ah gotchya - well depending on my lunch I may take a look to see if I can do a PR. Would it be considered by you & the team Jacob ?
j
Yeah, but I'm not sure if we can just load all of it. There are no dependencies available on the login screen anymore - no jquery, underscore, angularjs, etc., so we need to be sure those bundles don't just throw errors around
w
How about a new CSS variable to control more parts of the design such as those pink circle overlays and then just load a custom CSS file to override bits
j
Could be, yeah
would you be up for a chat later today, Warren?
w
Yeh sure
j
we could ping pong a bit about it?
great 🙂
m
Maybe change the image to a more ergonomically correct picture. It is not good for the body to sit in bed and work with a laptop.
j
Just to relay the message to others here; I talked with Warren yesterday about what he found in his blog post (and his general knowledge about customising the login screen) and we are going to add some more controls. They probably won't be ready for the next Release Candidate, but we should be able to make something in due time for the final release 🙂
c
That's great to hear and thanks for relaying the message
j
There's now a pull request ready for review, which we will strive to get merged tomorrow-ish in due time for RC3: https://github.com/umbraco/Umbraco-CMS/pull/15285
w
Will try & see if I can find time to take a look and play with it later on
j
w
Kudos - will play later. Need to do the day job
j
😉
RC3 is out just now if anyone would like to have a go at the login screen 🙂
c
w
This XML file at 
/App_Plugins/MyCustomLogin/Lang/en_us.xml
does not work for me @Jacob Overgaard
Copy code
xml
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<language alias="en_us" intName="English (US)" localName="English (US)" lcid="" culture="en-US">
  <creator>
    <name>The Umbraco community</name>
    <link>https://docs.umbraco.com/umbraco-cms/extending/language-files</link>
  </creator>
  <area alias="login">
    <key alias="greeting0">Happy super Sunday</key>
    <key alias="greeting1">Happy marvelous Monday</key>
    <key alias="greeting2">Happy tubular Tuesday</key>
    <key alias="greeting3">Happy wonderful Wednesday</key>
    <key alias="greeting4">Happy thunderous Thursday</key>
    <key alias="greeting5">Happy funky Friday</key>
    <key alias="greeting6">Happy Caturday</key>
  </area>
</language>
Also we have no way to set the CSS header color as far as I know
Copy code
css
umb-auth {
    --umb-curves-display: none;    
    --umb-login-background: var(--uui-palette-space-cadet);
    
    /* Trying to change header */
    --uui-color-interactive: var(--uui-palette-spanish-pink);
}
j
Not exactly sure how overrides work, but the login screen calls the generic localizedtext endpoint which should pick up language files. Can you check if your overrides are visible there?
w
Yep will tripple check
j
You need to override the variable that 
uui-color-interactive
uses. Not ideal, though. We should add a more local variable.
You can however set the background color of the content box, which is transparent by default
w
Yeh I saw I can set the background color of that box but that looks weird due to the rounded corners of the image that I can't unround either
j
Sounds like we could add a few more variables 😅
We can't however add variables for everything. An unfortunate side-effect of Shadow DOM.
w
Yeh I get it cant add for every teeny tiny thing but seems like could do with some more IMO
j
I'll see what I can do in terms of border-radius and color, though. They should be customizable.
w
Looks weird if I set a background color
Copy code
css
umb-auth {
    --umb-curves-display: none;    
    --umb-login-background: var(--uui-palette-space-cadet);
    
    /* Trying to change header */
    --uui-color-interactive: var(--uui-palette-spanish-pink);

    --umb-login-content-background: #eee;
}
j
Yeah, that was mostly intended to be used if you dont want to show a prominent photo. Tip: You can hide the image container and set a background image instead.
w
If I can control the color of the welcome text and the email, password fields - because your screwed if you have a dark background color
j
Try something like this:
Copy code
:root {
      --umb-login-image-display: none;
      --umb-login-content-display: flex;
      --umb-login-content-width: 500px;
      --umb-login-content-background: rgba(255, 255, 255, 0.75);
      --umb-login-content-height: fit-content;
      --umb-login-align-items: center;
      --umb-login-background: url(https://picsum.photos/1920/1080) no-repeat center center/cover;
}
It's a little gimmick - probably went a bit overboard with what you can customize 😉
w
Moving the XML to /config/lang/en_us.user.xml worked
Just not the App_Plugins one 🤔
Copy code
css
umb-auth {
        --umb-login-image-display: none;
        --umb-login-content-display: flex;
        --umb-login-content-width: 800px;
        --umb-login-content-background: rgba(255, 255, 255, 0.95);
        --umb-login-content-height: fit-content;
        --umb-login-align-items: center;
        --umb-login-background: url(https://raw.githubusercontent.com/umbraco/Umbraco-CMS/release-10.7.0/src/Umbraco.Web.UI.Client/src/assets/img/login.jpg) no-repeat center center/cover;
}
I can't control the size of the header and making the --umb-login-content-width: 800px does not make the header wrap
@Jacob Overgaard I would also test/verify if you can get the language overrides to work from an App_Plugins folder https://docs.umbraco.com/umbraco-cms/extending/packages/language-files-for-packages With these keys Happy super Sunday Happy marvelous Monday Happy tubular Tuesday Happy wonderful Wednesday Happy thunderous Thursday Happy funky Friday Happy Caturday
j
Seems we have two different standards for this, either en-US.xml or en_us.user.xml, but none of those work in Umbraco 13 it seems. Will dive deeper into it: https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/login#greeting
w
The one in the config folder worked for me with the 
en_user.user.xml
but not the one in App_Plugins
j
ah
Well I can see it's not just on the login screen. They don't take effect from the App_Plugins folder in the backoffice either. So probably a regression on Umbraco 13
@Warren Buckley I just stepped through a 100 different steps and I figure the docs are correct: You can only overwrite system language keys through files in the config folder such as 
~/config/lang/en_us.user.xml
. It is made so on purpose that any language files in App_Plugins do not overwrite system texts so that package developers do not accidentally set something that the system depends on. I don't know if that's always been the case, but at least since this commit from Kevin Jump in 2022 it's been like that: https://github.com/umbraco/umbraco-cms/commit/a7ed20918bc314bd50bcaa0646bab7d635c002a4
Therefore to set the greeting texts, you need to follow the guide for the "Login" article: https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/login#greeting
w
OK good to know - learnt something new
j
Found this piece of code in UmbracoBuilder.LocalizedText.cs:
only for the config files will it set "overwriteCoreKeys" to true:
Phew 😄
w
Updated blog post
j
@Warren Buckley I added 5 more variables: https://github.com/umbraco/Umbraco-CMS/pull/15301
Hope that covers the preliminary use cases 🙂
w
Yep be good to control the header size
As from screenshot earlier if I was to put the current day of the week messages back then they are giant IMO
j
added those as well just now 🙂
RC4 is out today containing the last few variables added. Documentation here: https://docs.umbraco.com/umbraco-cms/v/13.latest-rc/fundamentals/backoffice/login#custom-css-properties-reference
t
Excellent job, @Jacob Overgaard I checked the V13 docs for customizing the login page but without success, where should we place the config file to change the login button text with key global_login?
j
@Tarik For V13, if you want to override Core translations, you need to add it as a so called "user language file". More info here: https://docs.umbraco.com/umbraco-cms/13.latest-lts/extending/language-files#user-language-files
t
Thank you, @Jacob Overgaard There was a conflict of using it in 
wwwroot
but it should be on 
~/config
.
21 Views
PreviousNext
Powered by